<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>3D圆点波浪动画特效</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div id="container">
      <div class="camera -x">
        <div class="camera -y">
          <div class="camera -z">
            <div class="sea"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
  // 使用原生JS替换Vue功能
  document.addEventListener("DOMContentLoaded", function () {
    const sea = document.querySelector(".sea");

    // 创建100个wave元素
    for (let i = 1; i <= 100; i++) {
      const wave = document.createElement("div");
      wave.className = "wave";
      wave.style.setProperty("--d", i * -30 + "ms");

      wave.innerHTML = `
        <div class="counter -z">
          <div class="counter -y">
            <div class="counter -x">
              <div class="ball"></div>
            </div>
          </div>
        </div>
      `;

      sea.appendChild(wave);
    }
  });
</script>
